<template>
  <d2-container>
    <!-- 修改弹出框 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisibleRedact">
      <el-form :model="form_update">

        <el-form-item label="考核项" :label-width="formLabelWidth">
          <el-input v-model="form_update.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-input v-model="form_update.deptString" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所属指标" :label-width="formLabelWidth">
          <el-input v-model="form_update.ifpaName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考核种类名称" :label-width="formLabelWidth">
          <el-input v-model="form_update.typeString" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" :label-width="formLabelWidth">
          <el-input
            v-model="form_update.unitOfmeasurement"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="指标值" :label-width="formLabelWidth">
          <el-input v-model="form_update.targetedValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权重" :label-width="formLabelWidth">
          <el-input v-model="form_update.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考核周期" :label-width="formLabelWidth">
          <el-input v-model="form_update.period" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考核办法" :label-width="formLabelWidth">
          <el-input
            v-model="form_update.assessStandard"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRedact = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleupdate"
          >修 改</el-button
        >
      </template>
    </el-dialog>
    <div slot="header">
      <!-- 搜索框 -->
      <el-input
        v-model="tablePages.deptString"
        placeholder="请输入部门检索"
        class="inputBox"
      ></el-input>
      <el-button type="button" class="botton_souch" @click="searchTableData">搜索 </el-button>

      <!-- 选择器部门 -->
      <el-select
        v-model="ifpaName"
        clearable
        placeholder="请选择指标"
        class="selector"
        @change="getItemList"
      >
        <el-option
          v-for="item in optionsifpaName"
          :key="item.value"
          :label="item.ifpaName"
          :value="item.ifpaName"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 按钮 -->
    <div>
      <el-button type="button" @click="open">新增</el-button>
      <el-button type="button">删除 </el-button>
      <el-button type="button">更多操作</el-button>

      <!-- table -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

   <el-table-column prop="name" label="考核项名称" width="150">
          <div slot-scope="scope">{{ scope.row.name }}</div>
        </el-table-column>
        <el-table-column prop="deptString" label="部门" width="150">
          <div slot-scope="scope">{{ scope.row.deptString }}</div>
        </el-table-column>
        <el-table-column prop="ifpaName" label="所属指标" width="150">
        </el-table-column>
        <el-table-column prop="typeString" label="考核种类" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="unitOfmeasurement"
          label="计量单位"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="targetedValue"
          label="指标值"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="weight" label="权重" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="period" label="考核周期" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="assessStandard"
          label="考核办法"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <div slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </div>
        </el-table-column>
        <!-- <el-table-column prop="operition" label="操作" show-overflow-tooltip>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tablePages.currentPage"
          :page-size="tablePages.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tablePages.total"
        >
        </el-pagination>
      </div>
    </div></d2-container
  >
</template>

<script>
// export default {
//   name: 'page1'
// }
//
</script>

<style>
.block {
  float: right;
}

.inputBox {
  width: 25%;
}

.botton_souch {
  margin-left: 5%;
}
</style>

// 组件js
<script>
import util from "@/libs/util";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      multipleSelection: [],
      // 控制弹出框展示与隐藏
      dialogFormVisible: false,
      dialogFormVisibleRedact: false,
      // 绑定弹框中的表单数据
      form: {
        name:'',
        dept: "",
         deptString: "",
         creatorString: "",
         typeString: "",
        ifpaName: "",
        unitOfmeasurement: "",
        targetedValue: "",
        weight: "",
        period: "",
        assessmentMethod: "",
        type: "",
      },
      form_update: {
        name: '',
        dept: "",
        deptString:"",
        ifpaName: "",
        unitOfmeasurement: "",
        targetedValue: "",
        weight: "",
        period: "",
        assessmentMethod: "",
        id: "",
        type: "",
        typeString: "",
      },
      formLabelWidth: "120px",
      // 配置表格信息
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 10,
        // 列表总数
        total: 0,
        // 搜索框
        deptString: null,
      },
      //搜索框
      input: "",

      // 选择器指标
      optionsifpaName: [],
      ifpaName: "",

      // table
      tableData: [],
      // 配置表格信息
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 10,
        // 列表总数
        total: 0,
        // 搜索框
        assessmentTypes: null,
      },
      multipleSelection: [],
    };
  },
  created() {
    this.getTableList(this.tablePages);
    this.getAllList();
  },
  methods: {
    //选择框change事件
     getItemList() {
       this.getTableList(Object.assign(this.tablePages,{ifpaName:this.ifpaName}));
    },
    //查找所有无分页
    getAllList() {
      this.$request({
        url: "item/findAll",
        method: "post",
      }).then((res) => {
       this.optionsifpaName = res
      });
    },
    // 查找所有
    getTableList({ currentPage, limit, deptString,ifpaName}) {
      console.log(ifpaName)
      this.$request({
        url: "item/findAllAssessItem",
        method: "post",
        data: {
          currentPage,
          limit,
          data: {
          deptString,
          ifpaName
          },
        },
      }).then((res) => {
        // 给表格赋值
        this.tableData = res.list;
        // 给表格总数赋值
        this.tablePages.total = res.total;
      })
    },
    // 新增方法
    dialogFormVisibleAdd() {
      const params = {
        name: this.form.name,
        deptString: this.form.deptString,
        ifpaName: this.form.ifpaName,
        unitOfmeasurement: this.form.unitOfmeasurement,
        targetedValue: this.form.targetedValue,
        weight: this.form.weight,
        period: this.form.period,
        assessmentMethod: this.form.assessmentMethod,
        typeString:this.form.typeString,
        updupdatedString: util.cookies.get("uuid"),
      };
      this.$request({
        url: "item/addAssessItem",
        method: "post",
        data: params,
      }).then((res) => {
        this.getTableList(this.tablePages);
        this.dialogFormVisible = false;
        this.$message.success("新增成功");
      });
    },
    open() {
      // this.dialogFormVisible = true;
       this.$router.replace('addItem')
    },
    /**
     * 打开编辑弹框
     * @date 2021-12-16
     * @param {any} index 下标
     * @param {any} row 当前行对象
     */
    handleEdit(index, row) {
      this.dialogFormVisibleRedact = true;
      this.$request({
        url: "item/findById",
        method: "post",
        data: row,
      }).then((res) => {
        // console.log(res[0].creator)
         this.form_update.name = res[0].name;
        this.form_update.deptString = res[0].deptString;
        this.form_update.ifpaName = res[0].ifpaName;
        this.form_update.unitOfmeasurement = res[0].unitOfmeasurement;
        this.form_update.targetedValue = res[0].targetedValue;
        this.form_update.weight = res[0].weight;
        this.form_update.period = res[0].period;
        this.form_update.assessStandard = res[0].assessStandard;
        this.form_update.typeString = res[0].typeString,
        this.form_update.id = res[0].id;
      });
    },
    // 修改方法
    dialogFormVisibleupdate() {
      const params1 = {
         name: this.form_update.name,
        deptString: this.form_update.deptString,
        ifpaName: this.form_update.ifpaName,
        unitOfmeasurement: this.form_update.unitOfmeasurement,
        targetedValue: this.form_update.targetedValue,
        weight: this.form_update.weight,
        period: this.form_update.period,
        assessmentMethod: this.form_update.assessmentMethod,
        typeString:this.form_update.typeString,
        updatedString: util.cookies.get("uuid"),
        id:this.form_update.id
      };
      this.$request({
        url: "item/updateAssessItem",
        method: "post",
        data: params1,
      }).then((res) => {
        this.getTableList(this.tablePages);
        this.dialogFormVisibleRedact = false;
        this.$message.success("修改成功");
      });
    },
    /**
     * 列表删除操作
     * @date 2021-12-16
     * @param {any} index 当前对象下标
     * @param {any} row 当前行对象
     */
    handleDelete(index, row) {
      this.$request({
        url: "item/deleteAssessItem",
        method: "post",
        data: row,
      }).then((res) => {
        this.$message.success((res && res.msg) || "删除成功");
        this.getTableList(this.tablePages);
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    /**
     * 复选框状态change事件
     * @date 2021-12-20
     * @param {Array} val 改变之后的选中数组
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if(this.multipleSelection.length!=0){
        // newArr就是构建的id数组
        const newArr = this.multipleSelection.map(item=>item.id)
      }
    },
    /**
     * 页码发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} currentPage 切换后的当前页码
     */
    handleCurrentChange(currentPage) {
      this.tablePages.currentPage = currentPage;
      this.getTableList(this.tablePages);
    },
    /**
     * 页数发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} limit 切换后的每页条数
     */
    handleSizeChange(limit) {
      this.tablePages.limit = limit;
      this.getTableList(this.tablePages);
    },
    // 搜索
    searchTableData () {
      console.log( this.tablePages.deptString)
      this.getTableList(this.tablePages, this.tablePages.deptString)
      this.tablePages.deptString = null
    }
  },
};
</script>
